<template>
	<view class="out">
		<view class="header">
			<image class="logo" src="//edu-image.nosdn.127.net/d06e958d6d024c69a68c03c4b30da8b2.png" mode=""></image>
			<view class="search  iconfont  icon-sousuo"></view>
		</view>
		<scroll-view class="scroll" scroll-y="true" enable-flex>
			<!-- 分类列表 -->
			<view class="categorylist">
				<view class="categoryItem" v-for="(item,index) in iconDtoList" :key="item.id" >
					<image class="categoryItemImg" :src="item.photoUrl" mode=""></image>
					<view class="categoryItemText">{{item.name}}</view>
				</view>
			</view>
			<!-- 专题 -->
			<view class="special">
				<view class="specialTitle">专题标题</view>
				<view class="specialList">
					<image v-for="(item,index) in bannerList" :key="item.id" class="specialImg" :src="item.photoUrl" mode=""></image>
				</view>
			</view>
			<!-- 复用组件  -->
			<Card v-for="(item,index) in sectionDtoList" :key="index" :sectionDto="item"></Card>
			
			<!-- 复用组件2 -->
			<Frool v-for="(item,index) in sectionImgList" :key="item.sectionIndex" :sectionImg="item"></Frool>
			
		</scroll-view>
	</view>
</template>

<script>
import Card from './component/card/card.vue';
import Frool from "./component/floor/floor.vue"
import {mapGetters} from "vuex"
export default {
	components: { Card,Frool},
	mounted(){
		this.getHomeData()
	},
	data() {
		return {};
	},
	methods:{
		getHomeData(){
			this.$store.dispatch("home/gethomedata")
		},
		get(){
			console.log(this.bannerList)
		}
	},
	computed:{
		...mapGetters("home",["bannerList","iconDtoList","sectionDtoList","sectionImgList"])
	}
};
</script>

<style lang="stylus">
.out
	.header
		height 100rpx
		display flex
		align-items center
		justify-content space-between
		padding 0 30rpx
		.logo
			width 230rpx
			height 48rpx
	.scroll
		height calc(100vh - 100rpx)
		background-color #f2f4f7
		.categorylist
			background-color #FFFFFF
			height 320rpx
			margin-bottom 40rpx
			display flex
			flex-wrap wrap
			padding 0 20rpx 20rpx 20rpx
		.categoryItem
			height 125rpx
			width 25%
			display flex
			flex-direction column
			align-items center
			margin-top 16rpx
			box-sizing border-box
			.categoryItemImg
				width 76rpx
				height 76rpx
			.categoryItemText
				margin-top 16rpx
				height 28rpx
				font-size 28rpx
		.special
			padding 30rpx
			background-color #FFFFFF
			height 980rpx
			margin-bottom 40rpx
			.specialTitle
				height 42rpx
				margin-bottom 30rpx
				font-weight 600
			.specialList
				.specialImg
					height 272rpx
					width 100%
					margin-bottom 20rpx
</style>
